import React, {Component} from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View,} from 'react-native'
import FontAwesome from 'react-native-vector-icons/FontAwesome';

export default class PopularItem extends React.Component {
    render(){
        const {item} = this.props
        if(!item || !item.owner) return null;
        let favoriteBtn = 
            <TouchableOpacity
                style={{padding:6}}
                onPress={()=>{}}
                underlayColor={'transparent'}//点击时透明
            >
                <FontAwesome
                    name={'star-o'}
                    size={26}
                    style={{color:'red'}}
                />
            </TouchableOpacity>
        return(
            <TouchableOpacity
               
                onPress={this.props.onSelect}
            >
                <View style={styles.cell_container}>
                    <Text style={styles.title} >{item.full_name}</Text>
                    <Text style={styles.description} >{item.description}</Text>
                
                    <View style={styles.row}>
                        <View style={styles.row}>
                            <Text>Author:</Text>
                            <Image
                                style={{height:22,width:22}}
                                source={{uri:item.owner.avatar_url}}
                            />
                        </View>
                        <View style={styles.row}>
                            <Text>Star:</Text>
                            <Text>{item.stargazers_count}</Text>
                        </View>
                        {favoriteBtn}
                    </View>
                    
                </View>

            </TouchableOpacity>
        )

    }

}


const styles = StyleSheet.create({
    cell_container:{
        backgroundColor:'white',
        padding:10,
        marginLeft:10,
        marginRight:10,
        marginVertical:3,
        borderWidth:0.1,
        borderRadius:2,
        shadowColor:'gray',
        shadowOffset:{width:1,height:1},
        shadowOpacity:0.1,
        shadowRadius:1,
        elevation:2
    },
    row:{
        justifyContent:"space-between",
        flexDirection:'row',
        alignItems:'center'
    },
    title:{
        fontSize:16,
        color:"#333",
        marginBottom:2
    },
    description:{
        fontSize:14,
        marginBottom:2,
        color:'#888'
    }
})